<script setup lang="tsx">
import { NTag } from 'naive-ui';
import { fetchGetTicketList } from '@/service/api';
import { useAppStore } from '@/store/modules/app';
import { ticketOpFlagRecord, ticketProductTypeRecord, ticketStatusRecord } from '@/constants/business';
import { useTable } from '@/hooks/common/table';
import TicketSearch from './modules/ticket-search.vue';

const appStore = useAppStore();

const {
  columnChecks,
  columns,
  data,
  getData,
  getDataByPage,
  loading,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: fetchGetTicketList,
  showTotal: true,
  apiParams: {
    current: 1,
    size: 10,
    streamingNo: null,
    opFlag: null,
    productType: null,
    status: null
  },
  columns: () => [
    {
      key: 'index',
      title: '序号',
      align: 'center',
      width: 64
    },
    {
      key: 'streamingNo',
      title: '工单号',
      align: 'center',
      minWidth: 150
    },
    {
      key: 'status',
      title: '工单状态',
      align: 'center',
      render: row => {
        if (row.status === null) {
          return null;
        }

        const tagMap: Record<TicketManageApi.TicketManage.TicketStatus, NaiveUI.ThemeColor> = {
          1: 'warning',
          2: 'primary',
          3: 'success'
        };
        const label = ticketStatusRecord.get(row.status);

        return <NTag type={tagMap[row.status]}>{label}</NTag>;
      }
    },
    {
      key: 'source',
      title: '工单来源',
      align: 'center',
      minWidth: 200
    },
    {
      key: 'productType',
      title: '产品类型',
      align: 'center',
      render: row => {
        if (row.productType === null) {
          return null;
        }
        const label = ticketProductTypeRecord.get(row.opFlag);

        return label;
      }
    },
    {
      key: 'deviceId',
      title: '设备ID',
      align: 'center'
    },
    {
      key: 'opFlag',
      title: '操作类别',
      align: 'center',
      render: row => {
        if (row.opFlag === null) {
          return null;
        }

        const tagMap: Record<TicketManageApi.TicketManage.TicketOpFlag, NaiveUI.ThemeColor> = {
          1: 'success',
          2: 'warning'
        };
        const label = ticketOpFlagRecord.get(row.opFlag);

        return <NTag type={tagMap[row.opFlag]}>{label}</NTag>;
      }
    }
  ]
});
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <TicketSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <NCard title="工单列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="getData" />
      </template>
      <NDataTable
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="962"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>

<style scoped></style>
